<template>
  <div class="market">
    <!-- 客户分红规则 -->
    <div class="box mb-15">
      <div class="flex flex-rc">
        <div class="title">{{ $t('客户分红规则') }}</div>
      </div>

      <ul class="table bcl-mask radius">
        <li class="table__th">
          <div class="table__td">{{ $t('有效客户用户') }}</div>
          <!-- <div class="table__td">{{ $t('客户业绩') }}</div> -->
          <div class="table__td">{{ $t('获得比例') }}%</div>
        </li>

        <li class="table__tr" v-for="(v, i) in rules1" :key="i">
          <div class="table__td">{{ v.sub }}</div>
          <!--          <div class="table__td">{{ v.amount || 0 }} U</div>
 -->
          <div class="table__td">{{ v.rate }}</div>
        </li>
      </ul>
    </div>

    <!-- 团队规则 -->
    <div class="box mb-15">
      <div class="flex flex-rc">
        <div class="title">{{ $t('团队规则') }}</div>
      </div>

      <ul class="table bcl-mask radius">
        <li class="table__th">
          <div class="table__td">{{ $t('等级') }}</div>
          <div class="table__td">
            <div>
              <div>{{ $t('小市场') }}</div>
              <div>{{ $t('业绩') }}</div>
            </div>
          </div>
          <!-- <div class="table__td">{{ $t('有效客户用户') }}</div> -->
          <!-- <div class="table__td">
            <div>
              <div>{{ $t('大市场') }}</div>
              <div>{{ $t('达到等级') }}</div>
            </div>
          </div> -->
          <div class="table__td">{{ $t('获得比例') }}%</div>
        </li>

        <li class="table__tr" v-for="(v, i) in rules2" :key="i">
          <div class="table__td">{{ v.level }}</div>
          <div class="table__td">{{ v.small || 0 }} C</div>
          <!-- <div class="table__td">{{ v.sub }}</div>
          <div class="table__td">{{ v.big_level }}</div> -->
          <div class="table__td">{{ v.rate }}</div>
        </li>
      </ul>
    </div>

    <!-- 每日新增业绩 -->
    <div class="box mb-15">
      <div class="flex flex-rc">
        <div class="title">{{ $t('每日新增业绩') }}</div>
      </div>

      <div v-if="news.length">
        <!-- 统计 -->
        <ul class="list list--50">
          <li class="list__item container bcl-mask mb-15">
            <div class="item">
              <span class="label">{{ $t('大市场') }}</span>
              <span class="value">{{ newsToal.big_change || 0 }} C</span>
            </div>
            <div class="item">
              <span class="label">{{ $t('小市场') }}</span>
              <span class="value">{{ newsToal.small_change || 0 }} C</span>
            </div>
            <div class="item" style="width: 100%">
              <span class="label">{{ $t('日期') }}</span>
              <span class="value">{{ newsToal.date }}</span>
            </div>
          </li>
        </ul>

        <!-- 列表 -->
        <ul class="list list--50">
          <li
            class="list__item container bcl-mask mb-15"
            v-for="(v, i) in news"
            :key="i"
          >
            <div class="item">
              <span class="label">{{ $t('大市场') }}</span>
              <span class="value">{{ v.big_change || 0 }} C</span>
            </div>
            <div class="item">
              <span class="label">{{ $t('小市场') }}</span>
              <span class="value">{{ v.small_change || 0 }} C</span>
            </div>
            <div class="item" style="width: 100%">
              <span class="label">{{ $t('日期') }}</span>
              <span class="value">{{ v.ct }}</span>
            </div>
          </li>
        </ul>

        <!-- 分页 -->
        <van-pagination
          mode="simple"
          :prev-text="$t('上一页')"
          :next-text="$t('下一页')"
          :total-items="total1"
          :items-per-page="size1"
          @change="getNews"
          v-model="page1"
        ></van-pagination>
      </div>

      <van-empty :description="$t('暂无数据')" v-else></van-empty>
    </div>

    <!-- 分享客户 -->
    <div class="box mb-20">
      <div class="flex flex-rc">
        <div class="title">{{ $t('分享客户') }}</div>
      </div>

      <tabs-comp
        :tabs="tabs"
        @change="getMarkets"
        v-model:tabIndex="tabIndex"
      ></tabs-comp>

      <div v-if="markets.length">
        <!-- 统计 -->
        <ul class="list">
          <li class="list__item container bcl-mask mb-15">
            <div class="item">
              <span class="label">{{ $t('市场总额度') }}</span>
              <span class="value">{{ marketTotal.team_amount || 0 }} C</span>
            </div>
            <div class="item">
              <span class="label">{{ $t('分享客户总额度') }}</span>
              <span class="value">{{ marketTotal.amount_real || 0 }} C</span>
            </div>
            <div class="item">
              <span class="label">{{ $t('客户总数量') }}</span>
              <span class="value">{{ marketTotal.length || 0 }}人</span>
            </div>
          </li>
        </ul>

        <!-- 列表 -->
        <ul class="list">
          <li
            class="list__item container bcl-mask mb-15"
            v-for="(v, i) in markets"
            :key="i"
          >
            <div class="item" style="width: 100%">
              <div class="label">{{ $t('用户钱包') }}</div>
              <div class="value click" @click="copyString(v.user)">
                {{ v.wallet }}
              </div>
            </div>
            <div class="item" style="width: 100%">
              <span class="label">{{ $t('市场总额度') }}</span>
              <span class="value">{{ v.team_amount || 0 }} C</span>
            </div>
            <div class="item" style="width: 100%">
              <span class="label">{{ $t('分享客户有效认购收益额') }}</span>
              <span class="value">{{ v.contract?.amount_real || 0 }} C</span>
            </div>
          </li>
        </ul>
      </div>

      <van-empty :description="$t('暂无数据')" v-else></van-empty>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { copyString } from 'js/utils'
import apis from 'js/apis'

import tabsComp from './tabs.vue'

const tabs = computed(() => [$t('大市场'), $t('小市场')])
const tabIndex = ref(0)

// 规则
const rules1 = ref([])
const rules2 = ref([])

// 每日新增业绩
const news = ref([])
const newsToal = ref({})
const page1 = ref(0)
const size1 = ref(5)
const total1 = ref(0)

// 分享客户
const bigs = ref([])
const smalls = ref([])
const bigTotal = ref({})
const smallTotal = ref({})

const markets = computed(() => {
  return tabIndex.value === 0 ? bigs.value : smalls.value
})

const marketTotal = computed(() => {
  return tabIndex.value === 0 ? bigTotal.value : smallTotal.value
})

getAgentRules()
getTeamRules()
getNews()
getMarkets()

// 获取代理规则
async function getAgentRules() {
  const params = {
    loading: false,
  }

  const { code, data } = await apis.market.getAgentRules(params)

  if (code === 1) {
    rules1.value = data
  }
}

// 获取团队规则
async function getTeamRules() {
  const params = {
    loading: false,
  }

  const { code, data } = await apis.market.getTeamRules(params)

  if (code === 1) {
    rules2.value = data
  }
}

// 获取每日新增业绩
async function getNews() {
  const params = {
    page: page1.value,
    limit: size1.value,
  }

  const { code, data } = await apis.market.getNews(params)

  if (code === 1) {
    let records = data.data || []

    records = records.sort((a, b) => new Date(a.ct) - new Date(b.ct))

    news.value = records
    total1.value = data.count || 0

    // 统计
    let big_change = 0
    let small_change = 0
    let date = ''

    news.value.map((v) => {
      if (v.big_change <= 0) {
        v.big_change = 0
      }

      if (v.small_change <= 0) {
        v.small_change = 0
      }
    })

    news.value.map((v, i) => {
      big_change += v.big_change
      small_change += v.small_change

      if (i === 0) {
        date += v.ct
      }

      if (i === news.value.length - 1 && i !== 0) {
        date += ' ~ ' + v.ct
      }
    })

    newsToal.value = {
      big_change,
      small_change,
      date,
    }
  }
}

// 获取下级市场
async function getMarkets() {
  const { code, data } = await apis.market.getMarkets()

  if (code === 1) {
    let records = data || []
    let amounts = records.map((v) => v.team_amount)
    let max = Math.max.apply(null, amounts)
    let maxIndex = amounts.findIndex((v) => v === max)

    bigs.value = records.splice(maxIndex, 1)
    smalls.value = records

    {
      let team_amount = 0
      let amount_real = 0
      let length = 0

      bigs.value?.map((v) => {
        team_amount += v.team_amount || 0
        amount_real += v.contract?.amount_real || 0
        length += 1
      })

      bigTotal.value = {
        team_amount,
        amount_real,
        length,
      }
    }

    {
      let team_amount = 0
      let amount_real = 0
      let length = 0

      smalls.value?.map((v) => {
        team_amount += v.team_amount || 0
        amount_real += v.contract?.amount_real || 0
        length += 1
      })

      smallTotal.value = {
        team_amount,
        amount_real,
        length,
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
